<template>
    <div class="wrapper">
        <header-bar title="大厅"></header-bar>
        <slider class="slider" interval="3000" auto-play="true">
            <div class="frame" v-for="img in imageList">
                <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider>
        <div class="ticketList">
            <div class="ticket" v-for="item in 10" @click="jump">{{item}}</div>
        </div>
    </div>
</template>

<script>
  import headerBar from '../common/headerBar.vue'
  var navigator = weex.requireModule('navigator')
  var modal = weex.requireModule('modal')
  export default {
    data() {
      return {
        imageList: [
          { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
          { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
        ]
      }
    },
    created() {
    },
    methods: {
      jump () {
        navigator.push({
          url: '../bet/index.js',
          animated: "true"
        }, event => {
          modal.toast({ message: 'callback: ' + event })
        })
      }
    },
    components: { headerBar }
  }
</script>

<style scoped>
    .image {
        width: 750px;
        height: 300px;
    }
    .slider {
        margin-top: 25px;
        width: 750px;
        height: 300px;
        border-width: 2px;
        border-style: solid;
        border-color: #41B883;
    }
    .frame {
        width: 750px;
        height: 300px;
        position: relative;
    }
    .ticketList{
        flex-direction: row;
        flex-wrap: wrap;
        width: 750px;
        height:800px;
    }
    .ticket{
        width: 375px;
        height: 100px;
        border-bottom-color: #cccccc;
        border-bottom-style: solid;
        border-bottom-width:1px;
    }
</style>
